<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本的树状图页面</title>
		<script src="framework/jquery/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!--引用mui框架中的文件-->
		<link rel="stylesheet" type="text/css" href="framework/mui/css/mui.min.css"/>
		<script src="framework/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="framework/mui/mui.picker.min.css"/>
		<script src="framework/mui/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<!--datamagic for mui-->
		<script src="built/datamagic.mui.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="built/datamagic.mui.min.css"/>
		
		<script type="text/javascript">
			DataMagic.View.Tree=DataMagic.View.List.inherit("树状图",null,null,{
				insert:function(data) {
					if(!(data instanceof Array)) {
						data = [data];
					}
					for(var i in data) {
						var dataItem = data[i];
						var cell = this.item.clone(true);
						this.update(cell, dataItem, this.controller.model.meta.fieldList);
						cell.data("id", dataItem.id);
						dataItem.cell=cell;
						var parent=department.model.data[dataItem.parent];
						
						if(parent){
							dataItem.layer=parent.layer+1;
							cell.css("padding-left",(dataItem.layer*40)+"px");
							parent.cell.after(cell);
						}
						else{
							dataItem.layer=0;
							this.container.append(cell);
						}
					}
				}
				
			})
			
			DataMagic.Controller2 = DataMagic.Controller.inherit("修改过的", function(name, storage, host, params) {
				DataMagic.Controller.instanceList.push(this);
				this.model = new DataMagic.Model(name, storage, host, this, params);
				this.list = new DataMagic.View.Tree(this);
				this.toolbar = new DataMagic.View.Toolbar(this);
				this.form = new DataMagic.View.Form(this);
			});
			
			var department=new DataMagic.Controller2("department",sessionStorage,"php/DataMagic2.php");
		</script>
	</head>
	<body class="DataMagic default">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header>
		<nav class="mui-bar mui-bar-tab DMToolbar">
			<a class="mui-tab-item DMButton" data-command="browse"><span class="mui-icon mui-icon-more-filled"></span><span class="mui-tab-label">浏览</span></a>
			<a class="mui-tab-item DMButton" data-command="insert"><span class="mui-icon mui-icon-plus"></span><span class="mui-tab-label">新建</span></a>
			<a class="mui-tab-item DMButton" data-command="delete"><span class="mui-icon mui-icon-trash"></span><span class="mui-tab-label">删除</span></a>
			<a class="mui-tab-item DMButton" data-command="update"><span class="mui-icon mui-icon-compose"></span><span class="mui-tab-label">修改</span></a>
			<a class="mui-tab-item DMButton" data-command="search"><span class="mui-icon mui-icon-search"></span><span class="mui-tab-label">查找</span></a>
			<a class="mui-tab-item DMButton" data-command="save"><span class="mui-icon mui-icon-search"></span><span class="mui-tab-label">确认</span></a>
			<a class="mui-tab-item DMButton" data-command="cancel"><span class="mui-icon mui-icon-search"></span><span class="mui-tab-label">取消</span></a>
			<a class="mui-tab-item DMButton" data-command="refresh"><span class="mui-icon mui-icon-refresh"></span><span class="mui-tab-label">刷新</span></a>
		</nav>
		
		<div class="mui-content">
			<ul class="mui-table-view DMList" style="margin-top: 0px;">
				<li class="mui-table-view-cell mui-media DMItem">
					<div>
						<span data-field="title"></span>
					</div>
					<div style="font-size: 14px;color: gray;font-family: kaiti;">
						<span data-field="parent" class="mui-pull-left"></span>
						<span data-field="id" class="mui-pull-right"></span>
					</div>
				</li>
			</ul>
			<div class="mui-input-group DMForm"></div>
		</div>
	</body>
</html>
